<template>
  <div id="AddressCard">
    <div v-on:click="updateStatus">
      <el-row>
        <el-col :span="12">
          <div class="name-font text-hidden-single">{{ username }}</div>
        </el-col>
      </el-row>
      <el-row>
        <div class="photo-font">{{ data.phone }}</div>
      </el-row>
      <div class="address-font text-hidden adjustment-font">{{ data.transactionAddress }}</div>
      <!--    {{data.address?data.address: "浙江省杭州市钱塘区钱江湾生活园区29栋"}}-->
    </div>
    <div class="setting-icon">
      <el-dropdown trigger="click">
        <div class="setting-icon">
          <i class="el-icon-setting"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="el-icon-delete delete-font"><span v-on:click="open">删除</span></el-dropdown-item>
          <el-dropdown-item class="el-icon-edit"><span @click="dialogFormVisibleUpdate = true">修改</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-if="data.status" class="tags">
      默认地址
    </div>

<!--  dialog  -->
    <el-dialog title="修改收货地址" :visible.sync="dialogFormVisibleUpdate">
      <el-row>
        <el-col :span="24">
          <el-form :model="form">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-input v-model="form.transactionAddress"></el-input>
            </el-form-item>
          </el-form>
          <el-row class="adjustment-bottom-button" type="flex" justify="center">
            <el-col :span="12">
              <el-button v-on:click="updateUserInfo">保存修改</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import Address from "./AddressSelect";
export default {
  name: "AddressCard",
  components: {Address},
  props: {
    data: null,
    getAlluserInfo: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      form: {
        id: null,     //ID
        phone: null,  //手机号
        status: null,   //？？？
        transactionAddress: null, //地址
        userId: null  //用户ID
      },
      username: null,
      dialogFormVisibleUpdate: false, //控制修改对话框是否可见
      dialogFormVisibleAdd: false,  //控制增加对话框是否可见
    }
  },
  methods: {
    open(){
      const h = this.$createElement;
      this.$msgbox({
        center: true,
        customClass: "message2",
        message: h('div', null, [
          h('div', {
            class: "alter-status"
          }, "确定删除？"),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        confirmButtonClass: "message-button",
        cancelButtonText:　'取消',
        cancelButtonClass: "message-button2",
      }).then(action=>{
        this.deleteUser_info()
      })
    },
    updateStatus: function () {
      this.$api.user.updateStatus1({
        id: this.data.id,
        userId: sessionStorage.getItem("userId")
      }).then(res => {
        console.log("updateStatus", res);
        if (res.status === 200) {
          this.getAlluserInfo();
        }
      })
    },
    updateUserInfo: function () {
      this.$api.user.updateUserInfo2({
        id: this.data.id,
        phone: this.form.phone,
        transactionAddress: this.form.transactionAddress
      }).then(res => {
        console.log("updateUserInfo", res);
        if (res.data.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          sessionStorage.setItem("transactionAddress", this.form.transactionAddress);
          this.getAlluserInfo();
          this.dialogFormVisibleUpdate = false;
        }
      })
    },
    deleteUser_info: function () {
      // alert(this.data.id + "           " + sessionStorage.getItem("userId"));
      this.$api.user.deleteUser_info2({
        id: this.data.id,
        userId: sessionStorage.getItem("userId")
      }).then(res => {
        console.log("deleteUser_info", res);
        if (res.data.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getAlluserInfo();
        }
      })
    }
  },
  created() {
    this.username = sessionStorage.getItem("username");
  }
}
</script>

<style lang="scss" scoped>
#AddressCard {
  width: 245px;
  height: 150px;
  /*border: 2px dashed rgba(176, 224, 230, 1);*/
  cursor: pointer;
  box-shadow: 0 5px 20px 0 rgba(100,100,100,0.2);
  border-radius: 15px;
  padding: 0 15px 15px 15px;
  position: relative;
  background: rgba(176, 224, 230, 0.2);
}
#AddressCard:hover {
  /*border: 2px dashed #9B1A1A;*/
  background: rgba(176, 224, 230, 0.4);
}
.address-font {
  font-size: 18px;
  font-weight: 500;

}
.text-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-hidden-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjustment-font {
  /*padding-top: 30px;*/
}
.tags {
  width: 100px;
  height: 30px;
  background: #9B1A1A;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  border-radius: 0 15px 0 15px;
  position: absolute;
  right: 0;
  top: 0;
}
.name-font {
  font-size: 24px;
}
.photo-font {
  color: #7D7D7D;
  font-size: 15px;
}
.setting-icon {
  position: absolute;
  bottom: 0;
  right: 5px;
  color: #7D7D7D;
  font-size: 30px;
}
.setting-icon:hover {
  color: #3a8ee6;
}
.delete-font {
  color: #9B1A1A;
}
.adjustment-bottom-button {
  padding-top: 40px;
}

>>> .el-dropdown-menu__item:hover {
  color: #B0E0E6;
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
>>> .el-dialog__body {
  padding: 10px 40px;
}
>>> .el-dialog__header {
  padding: 10px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
</style>
